/**
 * Created by yongmingwei on 16/10/29.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Platform,
    Switch,
    Image
} from 'react-native';

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
var MiddleData = require('./MiddleData.json');
var MiddleView = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                {this.renderAllItem()}
            </View>
        );
    },
    renderAllItem(){
        var itemArr = [];
        for (var i=0;i<MiddleData.length;i++){
            var data = MiddleData[i];
            itemArr.push(
                <InnerView key={i} iconName={data.iconName} title={data.title}></InnerView>
            );
        }
        return itemArr;
    }
});

var InnerView = React.createClass({
    getDefaultProps(){
        return{
            iconName:'',
            title:''
        }
    },
    render(){
        return(
            <TouchableOpacity activeOpacity={0.5}>
                <View style={styles.innerViewStyle}>
                    <Image source={{uri:this.props.iconName}} style={{width:40,height:30,marginBottom:3}}></Image>
                    <Text style={{color:'gray'}}>{this.porps.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }
});

const styles = StyleSheet.create({
    container: {
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        backgroundColor:'white'
    },
    innerViewStyle:{
        width:70,
        height:70,
        justifyContent:'center',
        alignItems:'center'
    }
});

module.exports = MiddleView;